import { memo, useEffect } from 'react'
import { Form, Checkbox, Input } from 'antd'
import { QuestionParagraphPropsType } from '../interface'

const { TextArea } = Input

const PropComponent = memo((props: QuestionParagraphPropsType) => {
  const { text, isCenter, disabled, onChange } = props
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue({
      text,
      isCenter,
    })
  }, [text, isCenter])

  const handleFormChange = () => {
    onChange && onChange(form.getFieldsValue())
  }

  return (
    <Form
      form={form}
      layout="vertical"
      onValuesChange={handleFormChange}
      initialValues={{
        text,
        isCenter,
      }}
      disabled={disabled}
    >
      <Form.Item
        label="段落内容"
        name="text"
        rules={[{ required: true, message: '请输入段落内容' }]}
      >
        <TextArea />
      </Form.Item>
      <Form.Item label="" name="isCenter" valuePropName="checked">
        <Checkbox>居中显示</Checkbox>
      </Form.Item>
    </Form>
  )
})

export default PropComponent
